<template>
  <div class="userinfo">
    <!-- 个人中心 -->
    <el-container>
      <el-header height="100px">
        <el-row class="d-avataremo demo-basic">
          <el-col :span="4">
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="100" :src="getPic(user[0].headPic)"></el-avatar>
              </div>
            </div>
          </el-col>
          <el-col :span="8" style="text-align:left; height:105px;position:relative">
            <div class="user">
              <p>用户名：{{user[0].userName}}</p>
              <p>{{user[0].sex}}</p>
            </div>
          </el-col>
          <el-col :span="6" style=" height:105px;position:relative; border-right:1px solid #ccc">
            <div class="count">
              <a href="" @click.prevent='goCollect'><p><i class="el-icon-star-off"></i>收藏</p>
              <p>{{collectCount}}</p></a>
            </div>
          </el-col> 
          <el-col :span="6" style=" height:105px;position:relative">
            <div class="count">
              <a href="" @click.prevent='goComment'><p><i class="el-icon-chat-line-round"></i>评论</p>
              <p>{{commentCount}}</p></a>
            </div>
          </el-col>

        </el-row>
      </el-header>
   
      <el-main>
        <el-row style="position:relative;" >
          <el-col :span="12" style="text-align:left">
            <span class="ordertitle">我的订单</span>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <span class="ordertitles">
              <a href="" @click.prevent='goOrder'>更多订单>></a>
            </span>
          </el-col>
        </el-row>  
        <el-row  class="order" v-if="isExistOrder" :gutter="40">
          <el-col :span="8" class="orderlist" v-for="(product,index) in products" :key="index">
            <el-card :body-style="{ padding: '10px' }">
              <img :src="getProductPic(product.productPic)" class="image" />
              <div style="padding: 14px;">
                <span>{{product.productName}}</span>&nbsp;&nbsp;&nbsp;<span>￥{{product.price}}</span>
                <div class="bottom clearfix">
                  <time class="time">下单时间：{{ product.orderDate.substring(0, [10]) }}</time>
                  <el-button type="text" class="button"  @click.prevent='goOrder'>查看更多信息</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row v-if="!isExistOrder">
           <el-col :span="24"><div class="ww">订单空空如也</div></el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderProducts:[],
      // products:[],
      isExistOrder:false,
    };
  },
  computed:{
    commentCount(){
      return this.$store.state.commentCount;
    },
     collectCount(){
       return this.$store.state.collectCount;
     },
    //  products:{
    //   //  console.log('store',this.$store.state.orderproduct)
    //   get(){
    //      return this.$store.state.orderproduct;
    //   },
    //   set(v){
    //     this.$store.state.orderproduct=v
    //   }
      
    //  },
      user: {
      get() {
        return this.$store.state.user;
      },
      set(v) {
        this.$store.state.user = v;
      }
    }
    
  },
  created(){
    if(this.products.length!=0){
       this.isExistOrder=true;
    }
  },
  methods:{
    getPic(pic){
     if(pic==null){
        return require("../assets/bg.jpg")
      }else{ 
      let path = 'http://localhost:3000/upload/' + pic
      console.log(path)      
      return path
      }
     
    },
    getProductPic(pic){
       let path = 'http://localhost:3000/images/' + pic
      console.log(path)      
      return path
    },
    goCollect(){
      this.$store.state.activeName='second'
    },
    goComment(){
      this.$store.state.activeName='four'
    },
    goOrder(){
       this.$store.state.activeName='three'
    }
  },
  beforeCreate(){
    console.log('111')
    // this.orderProducts=localStorage.getItem('orders')
  }

};
</script>
<style lang='css' scoped>
.demo-basic{
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;

}
.user {
  position: absolute;
  top: 50%;
  margin-top: -20px;
}
.count{
  position: absolute;
  left: 50%;
  top:50%;
  margin-left: -20px;
  margin-top: -20px;
}
.image {
  width: 250px;
  height: 250px;
  
}
.ww{
   width:750px;
   height: 280px;
   color:#aaa;
   line-height: 280px;
}
.ordertitle{
  font-size: 20px;
}
.order .el-col{
   margin-bottom: 20px;
}

</style>